import React from 'react'
import {Input ,Button ,Upload,Icon,message} from 'antd';
import './index.less';
import axios from 'axios';
import {PATH,IP,URL} from '../../../../utils/urls';
import Map from '../../../../images/svg/map2.svg';
import BreadcrumbCustom from "../../../../components/BreadcrumbCustom";

export default class ChangeMainScene extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            pathUrl:Map,
            url:""
        };
        this.uploadChange = this.uploadChange.bind(this);
    }

    /**
     * 上传成功图片
     * @param file
     */
    uploadChange({ file }){
        if (file.status !== 'uploading') {
            console.log(file.name);
            this.setState({
                pathUrl:file.name
            })
        const formata = new FormData;
        formata.append("file",file.originFileObj);
        axios.post(PATH.uploadFile,formata)
            .then(response=>{
                if(response.data.code == 0){
                    this.setState({
                        pathUrl:URL+response.data.url,
                        url:response.data.url
                    })
                    this.editMainSceneFun();
                }
            })
        }
    }

    /**
     * 上传主底图成功后，调用修改主场景接口
     */
    editMainSceneFun=()=>{
        axios.post(PATH.editMainScene,{
            mainSceneImg:this.state.url
        }).then(response=>{
            console.log(response);
            if(response.data.code == 0){
                message.success(response.data.msg);
            }else{
                message.error(response.data.msg);
            }
        })
    }

    componentDidMount() {
        //获取主场景底图
        this.getMainSceneFun();
    }

    /**
     * 获取主底图资源
     * @returns {*}
     */
    getMainSceneFun=()=>{
        axios.get(PATH.getMineScene,{})
            .then(response=>{
                console.log(response);
                if(response.data.code == 0){
                    if(response.data.data.mainSceneImg!=""){
                        this.setState({
                            pathUrl:URL+response.data.data.mainSceneImg
                        })
                    }
                }
            })
    }


    render() {
        return (
            <div className="changeMainSceneClass">
                <BreadcrumbCustom first="配置管理" second="修改底图" />
                <div className="changeMainBtnDiv">
                    <div className="changeMainTitle">请选择底图文件</div>
                    <Input className="changeInput" value={this.state.pathUrl}/>
                    <Upload onChange={this.uploadChange} className="changeMainUpload">
                        <Button>
                            <Icon type="上传" /> Upload
                        </Button>
                    </Upload>
                </div>
                <div className="mainScenePreview">
                    <img src={this.state.pathUrl} />
                </div>
            </div>
        )
    }
}